<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .fruit{
            list-style: square;
            color:red;
            font-weight: bold;
        }
        .vg{
            list-style: disc;
            color:green;
            font-style: italic; /*字体倾斜*/
        }
    </style>
</head>
<body>
<h1>类选择器案例</h1>
<hr>
<ul>
    <li class="fruit">苹果</li>
    <li class="vg">土豆</li>
    <li class="vg">西红柿</li>
    <li class="fruit">西瓜</li>
    <li class="vg">白菜</li>
    <li class="fruit">草莓</li>
    <li class="vg">冬瓜</li>
</ul>
</body>
</html>